<template>
  <div class="container">
    <Header :title="title" :isWhite="false"></Header>
    <h1 class="title">{{ detail.title }}</h1>
    <img :src="detail.image" class="content-image" />
    <div class="content">{{ detail.content }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import Header from '@/components/Header.vue';

const route = useRoute()
const title = ref('项目详情') // 设置默认标题
const detail = ref({
  title: '加载中...',
  image: '',
  content: '内容加载中...'
})

onMounted(async () => {
  try {
    const response = await axios.get(
      `http://localhost:8080/api/item/${route.params.id}`
    )

    if (response.data?.data) {
      detail.value = {
        title: response.data.data.title,
        image: response.data.data.thumb,
        content: response.data.data.desc
      }
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    detail.value = {
      title: '数据加载失败',
      image: '/images/error.jpg',
      content: '请稍后重试'
    }
  }
})
</script>

<style scoped>
.container {
  padding: 2em;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.content-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.content {
  line-height: 1.6;
  font-size: 16px;
}
</style>